import { formatOrderInfo } from '../utils/util'
<template>
  <div class="container">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="orderType" label="订单类型"> </el-table-column>
      <el-table-column prop="payMoney" label="金额"> </el-table-column>
      <el-table-column prop="endAddress" label="地址"> </el-table-column>
      <el-table-column prop="nickName" label="订单信息">
        <el-link type="primary" slot-scope="scope" @click="showDetail(scope)"
          >查看信息
        </el-link>
        <el-dialog title="订单信息" :visible.sync="dialogVisible">
          <div class="orderDetail">
            <div class="item" v-for="(item, i) in orderInfo" :key="i">
              <span>{{ item.key }}：</span>
              <span v-if="item.key != '图片' && item.key != '打印附件'">{{
                item.value
              }}</span>
              <el-image
                v-else-if="item.key == '图片'"
                style="width: 100px; height: 100px"
                :src="item.value"
                :preview-src-list="[item.value]"
              >
              </el-image>
              <template v-else>
                <el-link
                  type="primary"
                  v-for="(file, j) in item.value"
                  :key="file"
                  :href="file"
                  target="_blank"
                  >附件{{ j + 1 }}</el-link
                >
              </template>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false"
              >关闭
            </el-button>
          </span>
        </el-dialog>
      </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column prop="publicTime" label="发单时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="orderView(scope)">修改</el-button>
          <el-popconfirm
            style="margin-left: 10px"
            title="这是一段内容确定删除吗？"
            @confirm="orderView(scope)"
          >
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 20,
      total: 0,
      dialogVisible: false, //订单信息弹窗开关
      orderDetail: [], //订单信息中的内容
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getOrderList();
    },
    getOrderList() {
      this.$http
        .get("/admGetOrders", {
          params: {
            currentPage: this.currentPage,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          //返回的数据在res.data中
          //console.log(res.data)
          if (res.data.status === "success") {
            this.total = res.data.total;
            this.tableData = res.data.result;
          } else {
            this.$message.error("服务器错误");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("服务器错误");
        });
    },
    //修改
    //查看
    orderView(scope) {
      //console.log(scope)
      const { _id } = scope.row;
      this.$router.push({
        name: "OrderView",
        params: {
          _id,
        },
      });
    },
    //删除
    //删除
    delOrder(scope) {
      const { _id } = scope.row;
      this.$http
        .get("/delOrder", {
          params: {
            id: _id,
          },
        })
        .then((res) => {
          if (res.data === "success") {
            this.$message.success("删除成功");
            this.getOrderList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((error) => {
          this.$message.error("删除失败");
        });
    },
    //展示订单详情
    showDetail(scope) {
      this.dialogVisible = true;
      //格式化订单内容信息
      this.orderInfo = formatOrderInfo(scope.row);
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
}
.orderDetail {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .item {
    text-align: left;
    margin: 5px 0;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      font-weight: bold;
      font-size: 16px;
      width: 80px;
      text-align: right;
    }
  }
}
</style>